<template>
    <div class="contenre" v-if="sellerInfo[0]">
        <div class="bg">
            <img :src="sellerInfo[0].bgImg" alt="">
        </div>
        <div class="topbar">
            <img class="imgleft" :src="sellerInfo[0].avatar" alt="">
            <div class="topbarContent">
                <div class="topbarTop">   
                    <img src="./img/brand@2x.png" alt="">
                    <h3>{{sellerInfo[0].name}}</h3>
                </div>
                <p class='textp'>{{sellerInfo[0].description}}/{{sellerInfo[0].deliveryTime}}分钟送达</p>
                <div class="foot">
                    <img src="./img/decrease_1@2x.png" alt="">
                    <p>在线支付满28减5元，满50减10</p>
                </div>
            </div>
            <div class="footbt">
                <p @click="showFn">{{sellerInfo[0].supports.length?sellerInfo[0].supports.length:"0"}}个 ></p>
            </div>
        </div>
        <div class="topbarfoot" @click="showFn">
            <img src="./img/bulletin@2x.png" alt="">
            <p>{{sellerInfo[0].bulletin}}</p>
            <i>></i>
        </div>
        <van-overlay z-index="99" :show="show" @click="show = false">
            <div class="wrapper" @click.stop>
                <message :scorec="sellerInfo[0].score" :supports="sellerInfo[0].supports" :show.sync="show"></message>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import Vue from 'vue';
import {mapState} from 'vuex'
import { Overlay } from 'vant';
Vue.use(Overlay);
import message from "./message"
export default {
    name: 'headerx',
    components:{
        message
    },
    data(){
        return{
            show: false
        }
    },
    methods:{
        showFn(){
            this.show = true;
        }
    },
    computed:{
        ...mapState(["sellerInfo"])
    }
}
</script>

<style lang="less" scoped>
.contenre{
    display:flex;
    flex-direction:column;
    position: relative;
    .topbar{
        background-color: rgba(7, 17, 27, 0.5);
        display:flex;
        justify-content: start;
        position: relative;
        .imgleft{
            margin: 0.48rem 0.32rem 0.36rem 0.48rem;
            height: 1.28rem;;
            width: 1.28rem;
        }
        .topbarContent{
            display:flex;
            flex-direction:column;
            justify-content: center;
            .topbarTop{
                display:flex;
                font-size: 0.32rem;
                color:rgb(255, 255, 255);
                font-weight: bold;
                line-height: 0.36rem;
                margin: 0.1rem 0 0;
                img{
                    height: 0.34rem;
                    border-radius: 0.04rem;
                    margin-right: 0.12rem;
                }
            }
            .textp{
                font-size: 0.24rem;
                color: rgb(255, 255, 255);
                font-weight: 200;
                line-height: 0.24rem;
                margin: 0.16rem 0 0.2rem;
            }
            .foot{
                display:flex;
                justify-content: start;
                img{
                    border-radius: 0.04rem;
                    margin-right: 0.08rem;
                    height:0.25rem;
                }
                p{
                    font-size: 0.2rem;
                    color: rgb(255, 255,255);
                    font-weight: 200;
                    line-height: 0.24rem;
                }
            }
        }
        .footbt{
            background-color:rgb(0, 0, 0,0.2);
            border-radius: 0.30rem;
            position: absolute;
            right: 0.24rem;
            bottom: 0.36rem;
            text-align:center;
            line-height:0.48rem;
            p{
                font-size: 0.2rem;
                color: rgb(255, 255, 255);
                font-weight: 200;
                line-height: 0.24rem;
                margin: 0.14rem 0.16rem;
            }
        }
    }
    .topbarfoot{
        height: 0.56rem;
        line-height: 0.56rem;
        background-color:rgb(7, 17, 27, 0.2);
        display:flex;
        align-items: center;
        img{
            margin: 0rem 0.08rem 0rem 0.24rem;
            height: 0.32rem;
            line-height: 0.32rem;
        }
        p{
            font-size: 0.2rem;
            color: rgb(255, 255, 255);
            font-weight: 200;
            line-height: 0.56rem;
            margin-right: 0.08rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }
        i{
            font-size: 0.2rem;
            color: rgb(255, 255, 255);
            font-weight: 200;
            line-height: 0.56rem;
            margin-right: 0.24rem;
        }
    }
}
.bg{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    filter: blur(0.02rem);
    img{
        width: 100%;
        height: 100%;
    }
}
</style>
<style>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
</style>